<template>
  <a-form-model :model="form" ref="ruleForm" :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item
	 label="类型"
    >
      <a-select v-decorator="['owner', {rules:[{required: true, message: '请选择轮播图类型'}]}]" v-model="form.type">
        <a-select-option :value="0">首页</a-select-option>
        <a-select-option :value="1">公司资质</a-select-option>
        <a-select-option :value="2">公司文化</a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item
      label="上传图片"
    >
	<a-upload
	       action="https://admin.lhlzgroup.com/api/upload/img"
	      list-type="picture-card"
	      :file-list="fileList"
	      @preview="handlePreview"
	      @change="handleChange"
	    >
	      <div v-if="fileList.length < 1">
	        <a-icon type="plus" />
	        <div class="ant-upload-text">
	          Upload
	        </div>
	      </div>
	    </a-upload>
	    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
	      <img alt="example" style="width: 100%" :src="previewImage" />
	    </a-modal>
     <!-- <a-upload-dragger
          name="file"
          action="http://192.168.0.103:3000/upload/img"
          @change="handleChange"
		  method="post"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            点击或拖拽图片至此上传
          </p>
        </a-upload-dragger> -->
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import {uploadImg} from '@/api/upload.js'	
import {bannerCreat,bannerEdit} from '@/api/banner.js'	

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const fields = ['title', 'startAt', 'owner', 'description']

export default {
  name: 'TaskForm',
  props: {
    record: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
     labelCol: { span: 4 },
     wrapperCol: { span: 14 },
	  previewVisible: false,
	  previewImage: '',
	  fileList:[],
      form: {
		  type:0,
		  src:'',
	  },
    }
  },
  mounted () {
	  if (this.record.id) {
	  	this.form = JSON.parse(JSON.stringify(this.record));
		this.fileList.push({
		  uid: '-1',
		  name: 'image.png',
		  status: 'done',
		  url: this.vuex_src+this.form.src,
		},)
	  }
  },
  methods: {
     handleCancel() {
	   this.previewVisible = false;
	 },
	 async handlePreview(file) {
	   if (!file.url && !file.preview) {
		 file.preview = await getBase64(file.originFileObj);
	   }
	   this.previewImage = file.url || file.preview;
	   this.previewVisible = true;
	 },
	 handleChange({ fileList }) {
	   this.fileList = fileList;
	 },
	 upload(e){
		 console.log(e)
		let formData=new FormData();
		formData.append('file',e.file)
		console.log(formData) 
		uploadImg(formData).then(res=>{
		})
	 },
    onOk () {
		 console.log('监听了 modal ok 事件')
		if(this.record.id){
				if(this.fileList.length>0&&this.fileList[0].uid!=-1){
					 this.form.src = this.fileList[0].response.url;
				}
			 // 编辑
				return new Promise(resolve => {
					bannerEdit(this.form).then(res=>{
					  resolve(true)
					})
				})
		}else{
			 // 创建
			 if(this.fileList.length>0){
				 this.form.src = this.fileList[0].response.url;
			 }
			 return new Promise(resolve => {
			 	bannerCreat(this.form).then(res=>{
			 	  resolve(true)
			 	})
			 })
		}
    },
    onCancel () {
      console.log('监听了 modal cancel 事件')
      return new Promise(resolve => {
        resolve(true)
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.visible = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
        }
      })
    }
  }
}
</script>
